<template>
	<view class="bg-color-item br-12 pa-12 order-item" @click="toDetail">
		<view class="flex flex-js-sb flex-ai-center">
			<view class="flex flex-ai-center">
				<text class="font-size-14" :class="`font-color-${orderStatusInfo.textColor}`">{{handleLang(orderStatusInfo.title)}}</text>
			</view>
			<view class="flex flex-ai-center">
				<view v-if="order.surplus_time_text*1000>=0&&order.order_status==1&&order.order_type<3" class='ml-8 flex flex-ai-center'>
					<text class="font-size-14 font-color-theme">距支付结束:</text>
					<u-count-down @finish='finish' class='ml-8' :time="order.surplus_time_text*1000" format="mm:ss"></u-count-down>
				</view>
				<view class="flex flex-ai-center" v-else-if="canyuCountDown>=0&&order.order_status==7&&order.order_type<3">
					<text class="font-size-14 font-color-theme">距拼团结束:</text>
					<u-count-down @finish='finish' class='ml-8' :time="canyuCountDown" format="mm:ss"></u-count-down>
				</view>
				<view class="font-color-success font-size-14" v-if="order.order_status == 2">拼团成功</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
		</view>
		<view class="pt-12 flex flex-ai-start">
			<w-image :src='order.goods_cover_image' width="80" height="80" radius="8"></w-image>
			<view class="pl-12 flex-1 flex flex-dir-col flex-js-sb">
				<view class="flex">
					<text class="font-size-14 font-color-textPrimary text-overflow-2">{{handleLang(order.goods_name)}}</text>
					<view class="pt-box">拼团</view>
				</view>
				<view v-if="order.collection_code.length" class="font-size-14 mt-4">
					<text class="font-color-666">藏品编号</text>
					<text v-for="item in order.collection_code" :key="item" class="ml-4 font-color-textPrimary">#{{item}}</text>
				</view>
				<view class="font-size-14 mt-4">
					<text class="font-color-666 mr-4">团购数量</text>
					<text class="font-color-textPrimary">{{ order.already_spelled }}/{{ order.part_number }}</text>
				</view>
				<view class="flex flex-js-sb flex-ai-center mt-6">
					<view class="font-size-12 font-color-999">{{order.createtime|formatDate}}</view>
					<view class="font-color-textPrimary font-size-18 font-w-bold">{{ order.total_price }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderStatusMap from './orderStatusMap.js'
	import {mapState} from 'vuex'
	export default {
		props:{
			order:{
				type:Object,
				default(){
					return {
						
					}
				}
			}
		},
		filters:{
			crystal_type(v){
				let map={
					'yellow':'hsj',
					'purple':'zsj',
					'blue':'lsj'
				}
				return map[v]
			}
		},
		computed:{
			orderStatusInfo(){
				if(this.order.id){
					return OrderStatusMap[this.order.order_type][this.order.order_status]
				}
				return {}
			},
			code(){
				if(this.order.collection_code&&this.order.collection_code.length==1){
					return this.order.collection_code[0].split('/')
				} 
			},
			...mapState('config',{
				payTimeLimt(state){
					return state.info.pay_time_limit? Number(state.info.pay_time_limit):0
				},
				nowTimestamp(state){
					return state.nowTimestamp
				}
			}),
			countDown(){
				return (this.order.createtime+this.payTimeLimt)*1000-this.nowTimestamp
			},
			canyuCountDown(){
				return (this.order.end_time)*1000-this.nowTimestamp
			}
		},
		methods:{
			toDetail(){
				this.$u.route('/pages/groupSharing/orderDetail',{id:this.order.id,orderType:this.order.order_type})
			},
			finish(){
				this.$emit('countDownOver',this.order)
			}
		},
		
	}
</script>

<style lang="scss">
	.order-item{
		/deep/ .u-count-down__text{
			@extend .font-color-theme,.font-size-14;
			line-height: normal;
		}
	}
</style>